<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="白领社区"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :data="commentList"
            @pullup="loadMore"
        >
            <!-- 共用轮播图组件 -->
            <img-swiper
                class="goods-swiper"
                :swiperList="imgList"
                :swiperHeight="swiperHeight"
                :pageShow="true"
                v-if="imgList.length>0"
            ></img-swiper>
            <!-- 共用轮播图组件 -->

            <div class="user-info">
                <div class="user-img-box">
                    <img :src="articalInfo.face" />
                </div>
                <div class="user-info-box">
                    <div class="user-name">{{articalInfo.nick_name}}</div>
                    <div class="artical-date">{{articalInfo.add_time}}</div>
                </div>
            </div>

            <div
                class="artical-detail"
                v-html="articalInfo.content"
            ></div>

            <div class="artical-other-info">
                <img
                    class="praise-btn"
                    :src="praiseStatus == 1?praiseOn:praiseOff"
                    @click="goPraise"
                />
                <div class="praise-list">
                    <div
                        class="praise-img-box"
                        v-for="(item,index) of praiseList"
                        :key="index"
                    >
                        <img :src="item.face" />
                    </div>
                </div>
                <div class="praise-num">{{praiseList.length}}</div>
            </div>

            <div class="comment-box">
                <div class="comment-title">共 {{commentList.length}} 条评论</div>
                <div
                    class="comment-item"
                    v-for="(item,index) of commentList"
                    :key="index"
                >
                    <div class="comment-user-info">
                        <div class="user-img-box">
                            <img :src="item.face" />
                        </div>
                        <div class="user-name">{{item.nick_name}}</div>
                    </div>
                    <div class="comment-detail-box">
                        <div class="comment-detail">{{item.content}}</div>
                        <div class="comment-date">{{item.add_time}}</div>
                    </div>
                </div>
            </div>
        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <div class="write-comment-box">
            <div class="write-comment">
                <img
                    class="write-icon"
                    src="@/assets/images/socialSystem/write-icon.png"
                />
                <input
                    class="write-input"
                    type="text"
                    placeholder="精彩神评"
                    v-model="commentWord"
                    @blur="goBottom"
                />
            </div>
            <div
                class="send"
                @click="sendReply"
            >发送</div>
        </div>
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import ImgSwiper from './components/ImgSwiper'
export default {
    name: 'Artical',
    components: {
        CommonHeader,
        CommonScroll,
        ImgSwiper
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.2rem'
            },
            swiperHeight: '100%',
            praiseStatus: 0,
            praiseOff: require('@/assets/images/socialSystem/praise.png'),
            praiseOn: require('@/assets/images/socialSystem/praise-on.png'),
            articalInfo: '',
            imgList: [],
            praiseList: [],
            commentList: [],
            commentWord: '',
            userInfo: '',
            nowPage: 1,
            totalPage: 1,
            isLoading: false
        }
    },
    mounted() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
            this.getArticalInfo()
            this.getCommentList()
        },
        getArticalInfo() {
            let postData = this.qs.stringify({
                id: this.$route.query.id
            })
            this.axios.post('/api/moments/get_one.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.articalInfo = data.data.content
                    this.imgList = data.data.content.imgs
                    this.praiseList = data.data.praise
                    if (
                        this.praiseList.findIndex(
                            element => element.user_id == this.userInfo.id
                        ) >= 0
                    ) {
                        this.praiseStatus = 1
                    } else {
                        this.praiseStatus = 0
                    }
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getCommentList() {
            this.isLoading = true
            let postData = this.qs.stringify({
                id: this.$route.query.id,
                page: this.nowPage,
                page_size: 10
            })
            this.axios
                .post('/api/moments/get_reply_list.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.commentList = this.commentList.concat(
                            data.data.list
                        )
                        this.totalPage = Math.ceil(
                            data.data.page_info.total / 10
                        )
                        this.nowPage++
                        this.isLoading = false
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getCommentList()
            }
        },
        goPraise() {
            let postData = this.qs.stringify({
                mid: this.$route.query.id,
                num: this.praiseStatus
            })
            this.axios.post('/api/moments/praise.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.getArticalInfo()
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        sendReply() {
            if (this.commentWord == '') {
                this.commonDialog.alert('提示', '请填写评论内容')
                return
            }
            let postData = this.qs.stringify({
                for_id: this.$route.query.id,
                content: this.commentWord
            })
            this.axios.post('/api/moments/reply.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.commonDialog.alert('提示', '评论成功！')
                    this.commentWord = ''
                    this.commentList = []
                    this.nowPage = 1
                    this.totalPage = 1
                    this.isLoading = false
                    this.getCommentList()
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        goBottom() {
            window.scroll(0, 0)
        }
    }
}
</script>

<style lang="stylus" scoped>
.user-info
    display flex
    align-items center
    padding 0.4rem
    background #fff
    .user-img-box
        width 0.8rem
        height 0.8rem
        border-radius 100%
        overflow hidden
        img
            width 100%
            height 100%
    .user-info-box
        flex 1
        margin-left 0.3rem
        .user-name
            font-size 0.37rem
            color #333
            line-height 1
        .artical-date
            margin-top 0.13rem
            font-size 0.32rem
            color #888
            line-height 1
.artical-detail
    padding 0 0.4rem 0.4rem 0.4rem
    font-size 0.37rem
    color #333
    line-height 1.5
    background #fff
.artical-other-info
    display flex
    align-items flex-start
    padding 0 0.4rem 0.4rem 0.4rem
    background #fff
    .praise-btn
        width 1.33rem
        height 0.67rem
    .praise-list
        display flex
        flex 1
        flex-wrap wrap
        padding 0 0 0 0.13rem
        .praise-img-box
            width 0.67rem
            height 0.67rem
            border-radius 3px
            overflow hidden
            margin-right 0.13rem
            margin-bottom 0.13rem
            img
                width 100%
                height 100%
        .praise-img-box:last-child
            margin-right 0
    .praise-num
        width 1.33rem
        height 0.67rem
        line-height 0.75rem
        text-align center
        background #f2f2f2
        border-radius 3px
        font-size 0.32rem
        color #999
.comment-box
    background #fff
    .comment-title
        padding 0.27rem 0.4rem
        font-size 0.35rem
        color #999
        border-top 1px solid #e5e5e5
    .comment-item
        padding-left 0.4rem
        .comment-user-info
            display flex
            align-items center
            .user-img-box
                width 0.82rem
                height 0.82rem
                border-radius 100%
                overflow hidden
                img
                    width 100%
                    height 100%
            .user-name
                font-size 0.35rem
                color #999
                margin-left 0.2rem
        .comment-detail-box
            display flex
            align-items baseline
            padding-left 1.02rem
            padding-bottom 0.4rem
            padding-right 0.4rem
            border-bottom 1px solid #e5e5e5
            margin-top 0.13rem
            margin-bottom 0.4rem
            .comment-detail
                max-width 5rem
                font-size 0.35rem
                color #131313
                line-height 1.3
            .comment-date
                font-size 0.29rem
                color #888
                margin-left 0.2rem
                line-height 1.3
    .comment-item:last-child>.comment-detail-box
        border none
.write-comment-box
    position absolute
    left 0
    right 0
    bottom 0
    display flex
    align-items center
    height 1.2rem
    padding-left 0.4rem
    border-top 1px solid #e5e5e5
    box-sizing border-box
    background #fff
    .write-comment
        display flex
        align-items center
        padding 0 0.27rem
        width 100%
        height 0.8rem
        background #f8f8f8
        border-radius 30px
        overflow hidden
        .write-icon
            width 0.34rem
        .write-input
            flex 1
            margin-left 0.2rem
            font-size 0.35rem
            color #4f4949
            background #f8f8f8
    .send
        width 2rem
        text-align center
        font-size 0.42rem
        color #628cd9
</style>


